<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 靠右的按钮 -->
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small" @click="showDialog = true"><i class="el-icon-edit" /> 添加</el-button>
        </el-row>
        <!-- 表格 -->
        <el-table :data="list" row-key="id" default-expand-all :tree-props="{children: 'childs', hasChildren: 'hasChildren'}">
          <el-table-column align="center" label="标题" prop="title" />
          <el-table-column align="center" label="权限点代码" prop="code" />
          <el-table-column align="center" label="操作">
            <template slot-scope="{ row }">
              <el-button type="primary" @click="editMenus(row.id)">修改</el-button>
              <el-button type="danger" @click="delMenus(row.id)"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 放置一个弹层 用来编辑新增节点 -->
    <el-dialog :title="`${showText}菜单`" :visible.sync="showDialog" @close="btnCancel">
      <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="权限组名称" prop="is_point">
          <!-- <el-radio-group> -->
          <el-radio v-model="formData.is_point" :label="false">菜单</el-radio>
          <el-radio v-model="formData.is_point" :label="true">权限点</el-radio>
          <!-- </el-radio-group> -->
        </el-form-item>
        <el-form-item label="权限组名称" prop="pid">
          <el-select ref="select" v-model="formData.pid" @focus="menusList">
            <el-option v-model="value">主导航</el-option>
            <!-- <el-option v-for="(items) in list" :key="items.id" :value="items.id" :label="items.title" /> -->
            <!-- 放置一个树形组件 -->
            <el-tree
              v-if="showTree"
              v-loading="loading"
              :data="list"
              :props="{ label: 'title', children: 'childs' }"
              :default-expand-all="true"
              @node-click="selectNode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码" prop="code">
          <el-input v-model="formData.code" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限标题" prop="title">
          <el-input v-model="formData.title" style="width:90%" />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>

</template>
<script>
import { menusList, delMenus, addMenus, editMenus, detailMenus } from '@/api/menus'
const defaultItem = {
  title: '', // 名称
  code: '', // 标识
  // description: '', // 描述
  // type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
  pid: null, // 因为做的是树 需要知道添加到哪个节点下了
  // enVisible: '0' // 开启
  id: '',
  is_point: '',
  description: ''
}
export default {
  name: 'BaseMenus',
  components: {},
  props: {},
  data() {
    return {
      radio: 1,
      list: [],
      value: '主导航',
      loading: false,
      showTree: false, // 默认不显示树形组件
      formData: {
        ...defaultItem
      },
      rules: {
        title: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      },
      showDialog: false
    }
  },
  computed: {
    showText() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  created() {
    this.menusList()
  },
  methods: {
    selectNode(node) {
      this.formData.pid = node.title
      console.log(this.formData.title)
      this.showTree = false
      this.$refs.select.blur()
    },
    async menusList() {
      this.showTree = true
      this.loading = true
      const { data } = await menusList()
      // console.log(data)
      // this.list = tranListToTreeData(data, null)
      this.list = data
      // console.log(this.list)
      this.loading = false
    },
    // 修改
    async editMenus(id) {
      const { data } = await detailMenus(id)
      this.formData = data
      // this.formData.id = data.title
      // await editMenus(this.formData)
      this.showDialog = true
      // this.menusList()
    },
    async delMenus(id) {
      try {
        await this.$confirm('确定删除吗？', '提示', {
          type: 'warning'
        }).then(async() => {
          await delMenus(id)
          this.$message.success('删除成功')
          this.menusList()
        }).catch(() => {
          this.$message.info('取消删除')
        })
      } catch (err) {
        console.log(err)
      }
    },
    async btnOK() {
      this.$refs.perForm.validate().then(() => {
        if (this.formData.id) {
          console.log(this.formData.id)
          return editMenus(this.formData)
        }
        this.formData.pid = 0
        return addMenus(this.formData)
      }).then(() => {
        //  提示消息
        this.$message.success('操作成功')
        this.menusList()
        this.showDialog = false
      })
      // try {
      //   this.$refs.perForm.validate()
      //   this.formData.pid = 0
      //   await addMenus(this.formData)
      //   this.menusList()
      //   this.showDialog = false
      // } catch (err) {
      //   console.log(err)
      // }
    },
    btnCancel() {
      this.formData = {
        ...defaultItem
      }
      this.$refs.perForm.resetFields()
      this.showDialog = false
    }
  }
}
</script>
<style  lang='scss' scoped>
.dashboard-container {
  ::v-deep .el-dialog {
    border-radius: 10px;
    overflow: hidden;
    .el-dialog__header {
      background-color: #409eff;
      .el-dialog__title {
        color: #fff;
      }
      .el-icon-close:before {
        color: #fff;
      }
    }
    .el-dialog__body {
      margin-bottom: -20px;
      margin-left: 20px;
      // .el-form-item__label {
      //   width: 230px !important;
      // }
    }
    .el-dialog__footer {
      padding-top: 0 !important;
      .btnOk {
        margin-right: 60px;
      }
    }
  }
}

</style>
